<template>
	<view class="page">
		<view class="my-data">
			<image class="head-image" src="https://ming-edu.oss-cn-beijing.aliyuncs.com/%E4%B8%8B%E8%BD%BD.jpg"></image>
			<view>
				<text class="one-data">{{user.name}}</text>
			</view>
			<view id="items">
				<!-- <image class="sex-logo" src="../../static/img/male.png"></image> -->
				<text class="one-data xuehao">{{user.userAccount}}</text>
			</view>
			<view>
				<text class="one-data">学校：湖南科技大学</text>
			</view>
			<view>
				<text class="one-data">院系：{{user.department}}</text>
			</view>
			<view>
				<text class="one-data">班级：{{user.userClass}}</text>
			</view>
			<view>
				<text class="one-data">入学年份：{{user.grade}}<span class="logout" @click="logout">注销</span></text>
			</view>
		</view>
		<view class="author-data">
			<view><text class="author-title">作者</text></view>
			<view class="author-name-view"><text class="author-name">苏明月</text></view>
		</view>
	</view>
</template>

<script>
import { needLogin }  from "../../common/utils/utils";
import {UserService} from "../../services/api.service";

export default {
	data() {
		return {
			user: {}
		}
	},
	mounted() {
		// this.getUserInfo()
	},
	methods: {
		// 获取用户信息
		getUserInfo() {
			UserService.get()
					.then(res => {
						if (res.code === 0) {
							this.user = res.data.user
						}
					}).catch(err => {
					console.log(err)
				})
		},
		// 注销
		logout() {
			uni.removeStorageSync("token")
			uni.navigateTo({
				url: '/pages/user/login'
			})
		}
	},
	onLoad(options) {
		const _this = this
		uni.startPullDownRefresh({
			success() {
				_this.getUserInfo()
			},
			complete() {
				uni.stopPullDownRefresh();
			}
		})
	},
	onPullDownRefresh() {
		this.getUserInfo()
		uni.stopPullDownRefresh();
	},
	onShow() {
		needLogin(this)
	}
}
</script>

<style>
.page {
	padding: 25rpx;
	width: 100%;
}
.my-data {
	position: relative;
	background-color: #7569f9;
	padding: 20rpx 20rpx 40rpx 20rpx;
	color: #FFFFFF;
	width: 100%;
	border-radius: 15rpx;
}
.my-data .head-image {
	position: absolute;
	top: 30rpx;
	right: 40rpx;
	width: 150rpx;
	height: 150rpx;
	background-color: #FFFFFF;
	border-radius: 75rpx;
}
/* #items {
	position: relative;
}
#items .sex-logo {
	width: 30rpx;
	height: 30rpx;
	margin-right: 13rpx;
	position: absolute;
} */
.xuehao {
	position: relative;
	padding-left: 40rpx;
}
.xuehao::before {
	content: '';
	position: absolute;
	background: url(../../static/img/male.png) no-repeat;
	display: inline-block;
	top: 0rpx;
	left: 0rpx;
	width: 30rpx;
	height: 30rpx;
	background-size: 30rpx 30rpx;
}
.one-data {
	line-height: 43rpx;
}


.author-data {
	background-color: #FFFFFF;
	margin-top: 30rpx;
	padding: 20rpx;
	text-align: center;
	border-radius: 15rpx;
}
.author-name-view {
	margin-top: 30rpx;
	margin-bottom: 20rpx;

}
.author-title {
	font-size: 30rpx;
}

.author-name {
	font-size: 50rpx;
	line-height: 70rpx;
}
.logout {
	float: right;
	margin-right: 4px;
}
</style>
